<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="/css/bootstrap.min.css" rel="stylesheet">
		<link href="/css/font-awesome.css" rel="stylesheet">
		<link href="/css/datatables.min.css" rel="stylesheet">
		<link href="/css/animate.css" rel="stylesheet">
		<link href="/css/style.css" rel="stylesheet">
		<script src="/js/jquery-3.1.1.min.js"></script>
		<script src="/js/bootstrap.min.js"></script>
		<script src="/js/vue.js"></script>
	</head>
	<body style="background-color:whitesmoke">
	<div id="app">
		<div class="row wrapper border-bottom white-bg page-heading">
			<div class="col-lg-10">
				<h2>数据表格</h2>
				<ol class="breadcrumb">
					<li>
						<a href="../../templates/index.html">主页</a>
					</li>
					<li>
						<a>表格</a>
					</li>
					<li class="active">
						<strong>数据表格</strong>
					</li>
				</ol>
			</div>
		</div>

		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="ibox-content m-b-sm border-bottom">
				<form role="form" class="form-horizontal">
					<div class="form-group">
						<label class=" col-sm-2 control-label">起始日期</label>
						<div class=" col-sm-3">
							<input type="date" class="form-control" v-model="kaoqingQuery.startTimes">
						</div>
						<label class=" col-sm-2 control-label">结束日期</label>
						<div class="col-sm-3">
							<input type="date" class="form-control" v-model="kaoqingQuery.endTimes" >
						</div>

						<div class="col-sm-2">
							<button type="button" class="btn btn-primary btn-sm" @click="loadData"><span class="glyphicon glyphicon-zoom-in"></span> 查询</button>
						</div>
					</div>

				</form>

			</div>

		</div>
			<div class="row">
				<div class="col-lg-12">

					<div class="ibox float-e-margins">

						<div class="ibox-content">

							<table class="footable table table-stripped toggle-arrow-tiny" data-page-size="15">
								<thead>
									<tr>
										<th data-toggle="true">编号</th>
										<th data-hide="phone">员工姓名</th>
										<th data-hide="all">考勤日期</th>
										<th data-hide="phone">状态</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(x,index) in list">
										<td>{{index+(curPage-1)*kaoqingQuery.row+1}}</td>
										<td>{{user.userName}}</span></i></td>
										<td>{{x.times}}</td>
										<td>
											<span v-if="x.kaoqingState==0">正常上班</span>
											<span v-if="x.kaoqingState==1">迟到</span>
											<span v-if="x.kaoqingState==2">早退</span>
										</td>
									</tr>
								</tbody>
							</table>

							<div>
								一共{{total}}条数据,一共{{totalPage}}页,当前第{{curPage}}页
								<button class="btn btn-success btn-sm" type="button" @click="prePages()">上一页</button>
								<button class="btn btn-success btn-sm" type="button" @click="nextPages()">下一页</button>
								<button class="btn btn-success btn-sm" type="button" @click="indexPage()">首页</button>
								<button class="btn btn-success btn-sm" type="button" @click="endPage()">尾页</button>
								跳转到<input type="number" id="num" style="width: 40px" min="1" max="10" v-model="selectPage" @keyup="valNum">页
								<button class="btn btn-success btn-sm" type="button" @click="changePage()">跳转</button>
								<select v-model="kaoqingQuery.row" @change="selectRow" >
									<option value="3">每页3条</option>
									<option value="5">每页5条</option>
									<option value="10">每页10条</option>
								</select>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
	<span id="sysId" th:text="${sysId}"></span>
	</div>
	</body>

	<script>
		new Vue({
			el:"#app",
			data:{
				list:[],
				kaoqingQuery:{//查询对象
					startTimes:"",
					endTimes:"",
					// userName:"",
					page:1,
					row:3,
					// departmentId:null
				},
				total:0,//总条数
				totalPage:0,//总页数
				selectPage:1,//选择页数
				prePage:0,//上一页
				nextPage:0,//下一页.
				curPage:0,//当前页
				// departments:[],//部门集合
				user:null//用户名和id
			},
			methods:{
				loadData:function () {
					var self = this;
					var sysId = $("#sysId").text();
					$.ajax({
						// async:false,//改为同步
						url: "http://192.168.7.36:2021/kaoqing-service/kaoqing/listone?sysId="+sysId,
						type:"post",
						contentType:"application/x-www-form-urlencoded",
						data:self.kaoqingQuery,
						dataType:"json",
						success:function (data) {
							self.list = data.list;
							self.total = data.total;
							self.totalPage = data.totalPage;
							self.prePage = data.prePage;
							self.nextPage = data.nextPage;
							self.curPage = data.curPage;
							self.user=data.user;
						}
					})
				},
				prePages:function () {//上一页
					this.kaoqingQuery.page = this.prePage;
					//刷新
					this.loadData();

				},
				nextPages:function () {
					this.kaoqingQuery.page = this.nextPage;
					//刷新
					this.loadData();

				},
				indexPage:function () {//首页
					this.kaoqingQuery.page = 1
					//刷新
					this.loadData();

				},
				endPage:function () {//尾页
					this.kaoqingQuery.page = this.totalPage;
					//刷新
					this.loadData();

				},
				changePage:function () {//跳转
					if(this.selectPage>this.totalPage){
						this.kaoqingQuery.page = this.totalPage;
					}else{
						this.kaoqingQuery.page = this.selectPage;
					}
					//刷新
					this.loadData();

				},
				selectRow:function () {//选择条数
					this.kaoqingQuery.page=1
					//刷新
					this.loadData();

				},
				valNum:function () {
					//定义正则表达式对象
					var dd =/^[\u4e00-\u9fa5]{0,}$/
					//如果输入的汉字，就显示1
					if(dd.test(this.selectPage)) {
						this.selectPage=1
					}else{
						console.log("=="+this.selectPage)
						//如果输入的值大于总页数，就回到最大值
						if(this.selectPage>this.totalPage){
							this.selectPage = this.totalPage;
						}
					}
				},
			},
			mounted(){
				this.loadData();
			}
		})
	</script>
</html>
